<template>
    <div>
        <el-tree 
            :data="categoryData"
            node-key="id"
            accordion
            @node-click="handleNodeClick">
            <section slot-scope="{ node, data }">
                <span style="margin-right: 30px; font-weight: 900;" v-if="data.active">{{ data.name }}</span>
                <span style="margin-right: 30px; color: #F56C6C; font-weight: 900;" v-else>{{ data.name }}</span>
                <span>
                    <template v-if="data.active">
                        <el-link type="primary" size="mini" @click="edit(data.id, data.level + 1, '追加分类')" style="margin-right: 10px;">追加</el-link>
                        <el-link type="warning" size="mini" @click="edit(data.id, null, '修改分类')" style="margin-right: 10px;">修改</el-link>
                        <el-link type="danger" size="mini" @click="del(data.id, 0)">禁用</el-link>
                    </template>
                    <el-link v-else type="success" size="mini" @click="del(data.id, 1)" style="margin-left: 38px;">启用</el-link>
                </span>
            </section>
        </el-tree>
        <el-dialog :title="dialog.title" :visible.sync="dialog.show" :close-on-click-modal="false" width="550px">
            <component :is="dialog.component" :show.sync="dialog.show" @getCategoryData="getCategoryData" :id="dialog.id" :parentId="dialog.parentId" :level="dialog.level" v-if="dialog.show"></component>
        </el-dialog>
    </div>
</template>

<script>
    import { get } from '@/plugins/axios.js'
    import { url } from './api.js'
    export default {
        name: 'Operate',
        created() {
            this.getCategoryData()
        },
        data() {
            return {
                categoryData: [],
                dialog: {
                    show: false,
                    title: '',
                    id: null,
                    parentId: '',
                    level: null,
                    component: () => import('./edit.vue')
                },
                categoryName: "",
                
            }
        },
        methods: {
            getCategoryData() {
                get(url.list, "", content => {
                    this.categoryData = content
                })
            },
            edit(id, level, title) {
                this.dialog.show = true
                this.dialog.title = title
                if(level !== null) {
                    this.dialog.id = null
                    this.dialog.parentId = id
                    this.dialog.level = level
                } else {
                    this.dialog.id = id
                    this.dialog.parentId = null
                    this.dialog.level = null
                }
            },
            del(id, active) {
                this.$confirm('此操作将'+ active === 1 ? '启用' : '禁用' + '该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    get(url.delete, { id: id, active: active }, content => {
                        this.getCategoryData()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            handleNodeClick(data) {
                this.$emit('changeCategoryName', data)
            }
        }
    }
</script>

<style scoped lang="less">
    #box {
        display: grid;
        grid-template-columns: 57% 1fr;
        grid-template-rows: auto;
        gap: 2%;
        height: 100px !important;

        #category, #attr {
            border: 1px solid #D7DAE2;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 3%;
            box-sizing: border-box;
            height: auto;
            align-self: start;
        }
        #attr {
            section {
                border: 1px solid #D7DAE2;
                border-radius: 4px;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                padding: 3%;
                box-sizing: border-box;
                margin: 1%;
            }
            section:first-of-type {
                margin-bottom: 20px;
            }
        }
    }
    h1 {
        margin: 0;
        margin-bottom: 20px;
        font-size: 1.3rem;
    }
    h1>span {
        margin-left: 10px;
    }
    hr {
        margin-bottom: 20px;
    }
</style>